import React from 'react'
import { Button, Form, Radio } from 'antd'
import { DateRangePicker } from 'components'
import moment from 'moment'
const FormItem = Form.Item;

export default {
  key: 'date-range-picker',
  name: 'DateRangePicker 时间范围选择器',
  author: '张然',
  description: '::antd::的不允许只选择一个，所以重写一个更符合业务。',
  isExampleFull: false,
  api: [
    {
      title: 'API',
      data: [{
        param: 'placeholder', description: '组件没有选择值时显示的文字。', type: 'string', defaultValue: '-'
      }, {
        param: 'size', description: '组件大小，有::large::，::default::，::small::三种。', type: 'string', defaultValue: 'default'
      }, {
        param: 'allowClear', description: '是否显示清除值的图标。', type: 'boolean', defaultValue: 'true'
      }, {
        param: 'disabled', description: '是否禁用。', type: 'boolean', defaultValue: '-'
      }, {
        param: 'value', description: '组件的值，格式与下方::parser::有关。', type: 'any', defaultValue: '-'
      }, {
        param: 'format', description: '日期显示的格式。', type: 'string', defaultValue: 'YYYY-MM-DD'
      }, {
        param: 'component', description: '内部选择日期的组件，需要为::antd::内::DatePicker::扩展的组件之一。', type: 'DatePicker', defaultValue: 'DatePicker'
      }, {
        param: 'formatter', description: '指定传出数据的格式。', type: '(startDate, endDate) => any', defaultValue: '(startDate, endDate) => startDate || endDate ? [startDate, endDate] : []'
      }, {
        param: 'parser', description: '指定传入数据的格式。', type: '(value: any) => [startDate: moment, endDate: moment]', defaultValue: 'value => (value instanceof Array) ? value : []'
      }, {
        param: 'disabledDate', description: '不可选择的日期。', type: '(currentDate: moment) => boolean', defaultValue: '() => false'
      }, {
        param: 'radios', description: '下方快速选择日期的单选值，见下方::rangeRadio::。', type: 'rangeRadio[]', defaultValue: '见代码'
      }, {
        param: 'getPopupContainer', description: '浮层渲染父节点，默认渲染到父节点上。', type: 'function(triggerNode)', defaultValue: 'triggerNode => triggerNode.parentNode'
      }],
      description: ''
    },
    {
      title: 'rangeRadio',
      data: [{
        param: 'text', description: '::radio::显示的文字。', type: 'text', defaultValue: '-'
      }, {
        param: 'startDate', description: '起始日期。', type: 'moment', defaultValue: '-'
      }, {
        param: 'endDate', description: '结束日期。', type: 'moment', defaultValue: '-'
      }],
      description: ''
    }
  ],
  example: [
    {
      title: '基础用法',
      description: '点击弹窗进行选择，可只选择一个日期，三种大小',
      state: {
        size: 'default'
      },
      getMethod: context => {
        return {
          handleChange: value => {
            console.log(value)
          }
        }
      },
      getContent: context => {
        const { size } = context.state;
        return (
          <div>
            <Radio.Group value={size} onChange={e => context.setState({ size: e.target.value })}>
              <Radio.Button value='large'>large</Radio.Button>
              <Radio.Button value='default'>default</Radio.Button>
              <Radio.Button value='small'>small</Radio.Button>
            </Radio.Group>
            <DateRangePicker
              onChange={context.handleChange}
              size={size}
              style={{ margin: '5px 0' }}
              placeholder='请选择日期范围'
            />
            <DateRangePicker disabled placeholder='被禁用' size={size}/>
          </div>
        )
      }
    },
    {
      title: '自定义快速选择日期的单选',
      description: '可自定义数量和范围。',
      state: {

      },
      getMethod: context => {
        return {
          handleChange: value => {
            console.log(value)
          }
        }
      },
      getContent: context => {
        const {  } = context.state;
        return (
          <div>
            <DateRangePicker
              onChange={context.handleChange}
              radios={[{
                text: '过去一年',
                startDate: moment().subtract(1, 'year'),
                endDate: moment()
              }, {
                text: '过去7天',
                startDate: moment().subtract(7, 'day'),
                endDate: moment()
              }, {
                text: '未来三个月',
                startDate: moment(),
                endDate: moment().add(3, 'month')
              }]}
            />
          </div>
        )
      }
    },
    {
      title: '组件替换',
      description: '可选择任意::antd::内::DatePicker::下的组件进行替换。',
      state: {

      },
      getMethod: context => {
        return {
          handleChange: value => {
            console.log(value)
          }
        }
      },
      getContent: context => {
        const {  } = context.state;
        return (
          <div>
            <DateRangePicker
              component='WeekPicker'
              onChange={context.handleChange}
              format='YYYY-wo'
              radios={false}
            />
          </div>
        )
      }
    },
    {
      title: '兼容antd的表单',
      description: '本组件可用于antd的::Form::组件中，使用::getFieldDecorator::包裹即可与antd表单一同使用。',
      state: {},
      getMethod: context => {
        return {
          handleSubmit: e => {
            e.preventDefault();
            context.props.form.validateFieldsAndScroll((err, values) => {
              if (!err) {
                console.log('Received values of form: ', values);
              }
            });
          }
        }
      },
      getContent: context => {
        const {  } = context.state;
        const { getFieldDecorator } = context.props.form;
        return (
          <Form onSubmit={context.handleSubmit}>
            <FormItem label='起始日期' style={{ marginBottom: 12 }}>
              {getFieldDecorator('user', {
                rules: [{
                  required: true,
                  message: '请选择'
                }]
              })(
                <DateRangePicker />
              )}
            </FormItem>
            <FormItem>
              <Button type="primary" htmlType="submit">提交</Button>
            </FormItem>
          </Form>
        )
      }
    },
    {
      title: '数据转换',
      description: '通过::parser::和::formatter::可输入和输出你想要的数据格式。',
      state: {
        value: {
          startDate: null,
          endDate: null
        }
      },
      getMethod: context => {
        return {
          handleChange: value => {
            console.log(value);
            context.setState({ value })
          }
        }
      },
      getContent: context => {
        const { value } = context.state;
        return (
          <div>
            <DateRangePicker
              onChange={context.handleChange}
              value={value}
              formatter={(startDate, endDate) => ({ startDate, endDate })}
              parser={value => [value.startDate, value.endDate]}
            />
          </div>
        )
      }
    }
  ]
}
